<template>
	<view :data-theme="theme">
		<form @submit="formSubmit" report-submit='true'>
			<view class='addAddress borderPad'>
				<view class='list borRadius14'>
					<view class='item acea-row' style="border: none;">
						<view class='name'>司机姓名</view>
						<span style="margin-left: 20rpx;" v-if="type == 2">{{userAddress.driverName}}</span>
						<input v-else type='text' placeholder='请输入司机姓名' placeholder-style="color:#ccc;"
							name='driverName' :value="userAddress.driverName" placeholder-class='placeholder'
							maxlength="20"></input>
					</view>
					<view class='item acea-row' style="border: none;">
						<view class='name'>司机性别</view>
						<span style="margin-left: 20rpx;" v-if="type == 2">{{userAddress.gender}}</span>
						<radio-group v-else style="margin-left: 20rpx;" name="gender">
							<label>
								<radio value="1" :checked="userAddress.gender == '1'" /><text>男</text>
							</label>
							<label style="margin-left: 20rpx;">
								<radio value="0" :checked="userAddress.gender == '0'" /><text>女</text>
							</label>
						</radio-group>
					</view>
					<view class='item acea-row' style="border: none;">
						<view class='name'>司机年龄</view>
						<span style="margin-left: 20rpx;" v-if="type == 2">{{userAddress.age}}</span>
						<input v-else type='text' placeholder='请输入司机年龄' placeholder-style="color:#ccc;" name='age'
							:value="userAddress.age" placeholder-class='placeholder' maxlength="20"></input>
					</view>
					<view class='item acea-row' style="border: none;">
						<view class='name'>身份证号</view>
						<span style="margin-left: 20rpx;" v-if="type == 2">{{userAddress.idCard}}</span>
						<input v-else type='text' placeholder='请输入身份证号' placeholder-style="color:#ccc;" name='idCard'
							:value="userAddress.idCard" placeholder-class='placeholder' maxlength="20"></input>
					</view>
					<view class='item acea-row' style="border: none;">
						<view class='name'>车牌号码</view>
						<span style="margin-left: 20rpx;" v-if="type == 2">{{userAddress.vehicleNumber}}</span>
						<input v-else type='text' placeholder='请输入车牌号码' placeholder-style="color:#ccc;"
							name='vehicleNumber' :value="userAddress.vehicleNumber" placeholder-class='placeholder'
							maxlength="20"></input>
					</view>
					<view class='item acea-row' style="border: none;" @click="openVehicleClass(1)">
						<view class='name'>车辆类型</view>
						<!-- type:1编辑，2查看 -->
						<span style="margin-left: 20rpx;"
							v-if="type == 2">{{userAddress.vehicleType | vehicTypeFilter}}</span>
						<input v-else type='text' disabled="readonly" placeholder='请输入车辆类型'
							placeholder-style="color:#ccc;pointer-events: auto;" name='vehicleType'
							:value="vehicleTypeName" placeholder-class='placeholder' maxlength="20"></input>
						<text v-if="type != 2" class='iconfont icon-xiangyou'></text>
					</view>

					<view class='item acea-row' style="border: none;">
						<view class='name'>联系电话</view>
						<span style="margin-left: 20rpx;" v-if="type == 2">{{userAddress.phone}}</span>
						<input v-else type='number' placeholder='请输入联系电话' placeholder-style="color:#ccc;" name="phone"
							:value='userAddress.phone' placeholder-class='placeholder' maxlength="11"></input>
					</view>
				</view>
				<view v-if="type == 1" class='default acea-row row-middle borRadius14'>
					<checkbox-group @change='ChangeIsDefault'>
						<checkbox :checked="userAddress.isDefault == '1'" />设置为默认
					</checkbox-group>
				</view>

				<button v-if="type == 1" class='keepBnt bg_color'
					form-type="submit">{{orderNo!=0?'保存并使用':'立即保存'}}</button>
				<!-- <button type="default" form-type="reset">Reset</button> -->
				<!-- #ifdef MP -->
				<view class="wechatAddress" v-if="!addressId" @click="getWxAddress">导入微信地址</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="wechatAddress" v-if="this.$wechat.isWeixin() && !addressId" @click="getAddress">导入微信地址
				</view>
				<!-- #endif -->
			</view>
		</form>
		<view v-show="showLoading" class="bg-fixed"></view>

		<tui-drawer mode="bottom" :visible="show9" @close="close">
			<view class="u-demo-block">
				<text class="u-demo-block__title">车辆类型</text>
				<view class="u-page__checkbox-item">
					<radio-group class="checke_list" v-model="vehicleType" @change="radioChange">
						<label class="uni-list-cell" v-for="(item, index) in checkboxList9" :key="index">
							<view class="item_top"
								style="margin-bottom: 32rpx;border-bottom: 1px solid #eee;justify-content: space-between;display: flex;padding-bottom: 20rpx;">
								<view class="item_img">
									{{item.name}}
								</view>
								<radio :value="item.type" :iconColor="bgColor" :checked="item.name == vehicleTypeName" class="round-checkbox" />
							</view>
						</label>
					</radio-group>
					<view style="height: 50px;"></view>
				</view>
			</view>
		</tui-drawer>
	</view>
</template>

<script>
	import {
		saveDriverApi,
		upDateDriverApi
	} from "@/api/delivery.js";
	import {
		genderFilter,
		vehicTypeFilter
	} from "../filter/filter.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import {
		Debounce
	} from '@/utils/validate.js';
	import tuiDrawer from '@/components/tui-drawer/index.vue';
	import {
		setThemeColor
	} from "../../../utils/setTheme";

	let app = getApp();
	export default {
		components: {
			tuiDrawer
		},
		data() {
			return {
				theme: app.globalData.theme,
				addressId: 0, //地址id
				type: 1, //1编辑，2查看
				userAddress: {
					// gender:'1',
					sort: 0,
					isDefault: '0', //0不使用，1设置为默认
					vehicleType: '', //1货车
				}, //地址详情
				showLoading: false,
				addressInfo: [],
				orderNo: '', //订单id
				show9: false,
				checkboxList9: [{
					name: '面包车',
					type: '1',
				}, {
					name: '平板车',
					type: '2',
				}, {
					name: '4.2米货车',
					type: '3',
				}, {
					name: '5.2米货车',
					type: '4',
				}, {
					name: '6.8米货车',
					type: '5',
				}, {
					name: '7.6米货车',
					type: '6',
				}, {
					name: '9.6米货车',
					type: '7',
				}, {
					name: '13米货车',
					type: '8',
				}],
				vehicleType: null,
				vehicleTypeName: null,
			};
		},
		computed: {
			...mapGetters(['isLogin']),
			addressText() {
				return this.addressInfo.map(v => v.regionName).join('/');
			}
		},
		watch: {
			isLogin: {
				// handler: function(newV, oldV) {
				// 	if (newV) {
				// 		this.getUserAddress();
				// 	}
				// },
				deep: true
			}
		},
		// 过滤器
		filters: {
			genderFilter,
			vehicTypeFilter
		},
		onLoad(options) {
			if (this.isLogin) {
				if (options.type != '3') {
					let data = JSON.parse(options.data);
					this.type = options.type;
					this.orderNo = data.orderNo || 0;
					this.addressId = data.id || 0;
					if (data.id > 0) {
						this.$set(this, 'userAddress', data);
						this.vehicleType = data.vehicleType; //车辆类型
						this.typeRadioChoose(data.vehicleType)
					}
				}
				this.bgColor = setThemeColor();
				uni.setNavigationBarTitle({
					title: this.addressId == 0 ? '添加司机信息' : '编辑司机信息',
					backgroundColor: this.bgColor,
				});

			} else {
				toLogin();
			}
		},
		methods: {
			openVehicleClass() {
				this.show9 = true;
			},
			close() {
				this.checkboxList9 = this.checkboxList9;
				this.show9 = false;
			},
			radioChange(evt) {
				this.vehicleType = evt.detail.value; //车辆类型
				let vehicType = evt.detail.value;
				this.typeRadioChoose(vehicType);
				this.show9 = false;
			},
			typeRadioChoose(vehicType){
				for (let i = 0; i < this.checkboxList9.length; i++) {
					if (this.checkboxList9[i].type == vehicType) {
						this.vehicleTypeName = this.checkboxList9[i].name;
						this.$set(this, 'vehicleTypeName', this.checkboxList9[i].name)
					}
				};
			},


			/**
			 * 提交用户添加地址
			 * 
			 */
			formSubmit: Debounce(function(e) {
				let that = this,
					value = e.detail.value;
				if (!value.driverName) return that.$util.Tips({
					title: '请填写司机姓名'
				});
				if (!value.gender) return that.$util.Tips({
					title: '请选择司机性别'
				});
				if (!value.age) return that.$util.Tips({
					title: '请输入司机年龄'
				});
				value.vehicleType = this.vehicleType;

				if (!value.idCard) return that.$util.Tips({
					title: '请填写身份证号'
				});
				if (!/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})(\d|X)$/i.test(value.idCard)) return that.$util.Tips({
					title: '请输入正确的身份证号'
				});
				if (!value.vehicleNumber) return that.$util.Tips({
					title: '请填写车牌号码'
				});
				if (!/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/i.test(value
						.vehicleNumber)) return that.$util.Tips({
					title: '请输入正确的车牌号码'
				});
				if (!value.vehicleType) return that.$util.Tips({
					title: '请选择车辆类型'
				});
				if (!value.phone) return that.$util.Tips({
					title: '请填写联系电话'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(value.phone)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});

				if (that.addressId) {
					value.id = that.addressId;
				};

				value.sort = 0;
				value.delFlag = 0; //是否删除标记，0正常，1已删除
				value.isDefault = parseInt(that.userAddress.isDefault);

				uni.showLoading({
					title: '保存中',
					mask: true
				})
				if (that.addressId) {
					upDateDriverApi(value).then(res => {
						that.$util.Tips({
							title: '修改成功',
							icon: 'success'
						});
						that.onSuccess();
					}).catch(err => {
						return that.$util.Tips({
							title: err
						});
					})
				} else {
					saveDriverApi(value).then(res => {
						that.$util.Tips({
							title: '添加成功',
							icon: 'success'
						});
						that.addressId = res.data;
						that.onSuccess();
					}).catch(err => {
						return that.$util.Tips({
							title: err
						});
					})
				}

			}),
			onSuccess() {
				let orderNo = this.orderNo;
				let id = this.addressId;
				setTimeout(() => {
					if (orderNo != 0 && id != 0) {
						uni.redirectTo({
							url: '/pages/disDriver/deliverList/deliverList'
						})
					} else {
						// #ifdef H5
						return history.back();
						// #endif
						// #ifndef H5
						return uni.navigateBack({
							delta: 1,
						})
						// #endif
					}
				}, 1000);
			},
			ChangeIsDefault: function(e) {
				if (e.detail.value == '1') {
					this.$set(this.userAddress, 'isDefault', '1');
				} else {
					this.$set(this.userAddress, 'isDefault', '0');
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.bg-fixed {
		width: 100%;
		height: 750rpx;
		position: absolute;
		top: 0;
	}

	.addAddress {
		padding-top: 20rpx;
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.addAddress .list {
		background-color: #fff;
		padding: 0 24rpx;
	}

	.addAddress .list .item {
		border-top: 1rpx solid #eee;
		padding: 24rpx 0;
		justify-content: flex-start;
		align-items: center;
	}

	.addAddress .list .item .name {
		font-size: 30rpx;
		color: #333;
		width: 120rpx;
	}

	.addAddress .list .item input,
	.address {
		flex: 1;
		width: 490rpx;
		margin-left: 20rpx;
		font-size: 30rpx;
		font-weight: 400;
	}

	.addAddress .list .item .placeholder {
		color: #ccc;
	}

	.addAddress .list .item picker .picker {
		width: 410rpx;
		font-size: 30rpx;
	}

	.addAddress .default {
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
		margin-top: 23rpx;
	}

	.addAddress .default checkbox {
		margin-right: 15rpx;
	}

	.addAddress .keepBnt {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 80rpx auto 24rpx auto;
		font-size: 32rpx;
		color: #fff;
	}

	.addAddress .wechatAddress {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 0 auto;
		font-size: 32rpx;
		// color: #E93323 ;
		@include main_color(theme);
		@include coupons_border_color(theme);
	}

	.font_color {
		@include main_color(theme);
	}

	.relative {
		position: relative;
		//line-height: normal !important;
	}

	.icon-dizhi {
		font-size: 44rpx;
		z-index: 100;
	}

	.abs_right {
		position: absolute;
		right: 0;
	}

	.u-demo-block {
		height: 50vh;
		padding: 20px;
	}

	.block-list {
		display: flex;
		justify-content: space-between;
		// align-items: center;
		margin-bottom: 10px;

	}

	.u-demo-block__title {
		font-size: 16px;
		font-weight: bold;
		display: block;
		text-align: center;
		margin-bottom: 20px;
	}

	/deep/ checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		@include main_bg_color(theme);
		@include coupons_border_color(theme);
		color: #fff !important
	}

	/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		@include main_bg_color(theme);
		@include coupons_border_color(theme);
		color: #fff !important;
		margin-right: 0 !important;
	}
</style>